<template>
  <van-tabbar route v-model="active" active-color="#FF7604" inactive-color="#666666">
    <van-tabbar-item v-for="(item,index) in tabs" :key="index" replace :to=item.to>
      <span>{{item.title}}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
name: "tabbar",
  data(){
    return{
      active: 0,
      tabs:[
        {title:"首页",to:"/home",inactive:require("@/assets/img/tabbar/tabbar1.png"),active:require("@/assets/img/tabbar/tabbar1_actNotext.png")},
        {title:"微淘",to:"/category",inactive:require("@/assets/img/tabbar/tabbar2.png"),active:require("@/assets/img/tabbar/tabbar2_act.png")},
        {title:"消息",to:"/message",inactive:require("@/assets/img/tabbar/tabbar3.png"),active:require("@/assets/img/tabbar/tabbar3_act.png")},
        {title:"购物车",to:"/cart",inactive:require("@/assets/img/tabbar/tabbar4.png"),active:require("@/assets/img/tabbar/tabbar4_act.png")},
        {title:"我的淘宝",to:"/profile",inactive:require("@/assets/img/tabbar/tabbar5.png"),active:require("@/assets/img/tabbar/tabbar5_act.png")},
      ],
      icon: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
      },
    }
  }
}
</script>

<style scoped>
img{
  width: .7rem;
  height: .7rem;
}
</style>